import React from 'react';
import ThridList from '../../../Component/thirdList';
import { Input,Select,Table } from 'antd';
import { inject, observer } from 'mobx-react';
import bornDate from '../../../util/bornDate'
const Search = Input.Search;
const Option = Select.Option;
var fa=[
    {developerUserName:'user1',title:'ddd',create_time:'dsddd',id:1},
    {developerUserName:'user1',title:'ddd',create_time:'dsddd',id:2},
    {developerUserName:'user1',title:'ddd',create_time:'dsddd',id:3},
    {developerUserName:'user1',title:'ddd',create_time:'dsddd',id:4},
    {developerUserName:'user1',title:'ddd',create_time:'dsddd',id:5},
    {developerUserName:'user1',title:'ddd',create_time:'dsddd',id:6},
    {developerUserName:'user1',title:'ddd',create_time:'dsddd',id:7},
    {developerUserName:'user1',title:'ddd',create_time:'dsddd',id:8},
    {developerUserName:'user1',title:'ddd',create_time:'dsddd',id:9},
    {developerUserName:'user1',title:'ddd',create_time:'dsddd',id:10}
]
@inject('transManage')
@observer
export default class ProductFeeDetail extends React.Component {
    constructor(props) {
        super(props)
    }
    columns = [{
        title: '用户名',
        dataIndex: 'developerUserName',
        key: 'developerUserName',
    },
        {
            title: '计费(元)',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '创建时间',
            dataIndex: 'create_time',
            key: 'create_time',
        }];


    componentWillMount() {
        this.props.transManage.getProductList()
    }
    handleChange(val){
        this.props.transManage.DeveloperUserProductList.month=val
        this.props.transManage.getDeveloperUserProductList()
    }
    handelFilteProductList(value){
        this.props.transManage.productList=this.props.transManage.productList.filter(e=>{
            return e.name.indexOf(value)!=-1
        })
    }
    handelTableChange(pagination, filters, sorter){
        this.props.transManage.param.pagenow=pagination.current
        this.props.transManage.pagination=pagination
        this.props.transManage.getDeveloperUserProductUseDetail()
    }
    handelshowProductDetail(id,name){
        this.props.transManage.DeveloperUserProductList.productId=id
        this.props.transManage.paginationProduct.current=this.props.transManage.DeveloperUserProductUseDetail.pagenow=1
        this.props.transManage.getDeveloperUserProductList()
        this.props.transManage.title=name
    }
    render(){
        const {productList=[],productListAll=[],productListTable=[],paginationProduct,title}=this.props.transManage
        return (
            <div  style={{'height':'100%'}}>
                <div className="br-r-d8 pos-abs" style={{'width':'240px','height':'100%'}}>
                    <div className="p1014">
                        <Search
                            placeholder="筛选"
                            style={{ width: '100%' }}
                            enterButton
                            onSearch={this.handelFilteProductList.bind(this)}
                            onInput={(e)=>{e.target.value.trim()==''?this.props.transManage.productList=productListAll:null}}
                        />
                    </div>
                    <ul className="third-list">
                        {productList.map((res,i) => (
                            <ThridList click={this.handelshowProductDetail.bind(this,res.id,res.name)} infObj={res} key={res.update_time||i}  pathl={require('../../../public/images/pic1.png')}/>
                        )
                        )}

                    </ul>
                </div>
                <div className="p20 fl w100 " style={{'paddingLeft':'260px'}}>
                    <h2 className="dib f18 fwb">{title}</h2>
                    <div className="fr">
                        <Select  style={{ width: 120}} defaultValue={new Date().getFullYear()+'-'+(new Date().getMonth()+1)} onChange={this.handleChange.bind(this)}>
                            {bornDate().map(
                                (e)=>{
                                    return (
                                        <Option value={e} key={e}>{e}</Option>
                                    )
                                })}

                        </Select>
                    </div>
                    <div className="table mt-20">
                        <Table
                            columns={this.columns}
                            dataSource={productListTable.slice()}
                            rowKey="id"
                            loading={false}
                            pagination={paginationProduct}
                            onChange={this.handelTableChange.bind(this)}
                        />
                    </div>
                </div>

            </div>
        )
    }
}
